/** @jsxImportSource @emotion/react */
import * as React from "react";
import {Text, useTheme,} from "customize-easy-ui-component";
import { ReportViewProps, } from "../../common/base";
import {
    末尾链接, 落款单位地址,
} from "../../common/rarelyVary";
import {检验结论报告,} from "./repView";
import {useSubRepMain} from "../../hook/useSubRepMain";
import HashLinkObserver from "react-hash-link";
import {useRepMenuDirItems} from "../../hook/useMainRepUrlOr";
import {宏观检验报告} from "../viewMacr";
import {资料审查报告} from "../viewReview";
import {ReportFirstPageHeadAllNmbbm, 注意事项IndPl, 目录页PL, 结论报告附页PL, 首页设备概况P} from "../rarelyVary";
import {VsProjects默认} from "../editorDJ";
import {useItemsMapPressure} from "../../common/pressure";
import {安全附件检验} from "../viewAcces";
import {PipelineCharacteristics,} from "../viewFeature";
import {PipeLineDiagram} from "../viewLineDg";

//【承压类报告】实际上没有大度的原始记录打印需求。旧平台模板对文件的组织宽泛，需依赖第三页的目录和第二正大项伪报告页的检验结论报告附页的配置手段让用户自己定义报告输出以及最终分项报告子页面的顺序，甚至证书搁在前面。
//正式报告的显示打印。 默认打印A4:210X297mm纸张。 打印特别处理URL尾部加上?print=1确保全部都显示出，不要交互式可以折叠的。
//不需要每个verId新搞一个文件的，甚至不需要搞新的组件，可以只需内部逻辑处理。
//verId 实际在PeriodicalInspection.E配置文件中reportTemplate配上的。#不是路由器注入提供！！
export const ReportView: React.FunctionComponent<ReportViewProps> = ({
    repId,   source: orc,  verId,rep,
}) => {
  const theme= useTheme();
    const [mapFxian]=useItemsMapPressure({ projects:orc.Projects });
  // const [[redundance,bindRedund] ] =useAreaFoldable(false,[undefined ]);
  // const THICKM_VS_Cmp= 测厚报告模板[`${THICKM_VS_Ver}` as keyof typeof 测厚报告模板]; 【定规则】一般报告必须中间必有-符号，可做嵌入式的分项报告模板号码中间必须_符号。
   //内嵌模式的:在模板里面就已经敲定了版本号,分项模板编代码,不用让后端去建立Report对象; THICK_MS 独立目录的，既可以独立流转，也能直接内嵌式的。可是：单线图和特性表这样的分项是只能内置的分项形态做的复用引入组件。
  //而公共模板的分项，都有独立的模板编码的，缺点=编辑器和主报告是脱离即没有一块显示全部的原始记录的。   # 单线图和特性表还是采用复用内置模式非公共模板，不支持独立流转形态。
  const [renderThickm]= useSubRepMain("cm/thickm", {nestMd:'THICK_MS',orc, repId:repId!, rep, NestMbVer:1});
  const [renderSpectrVs]= useSubRepMain("cm/spectrVs", {nestMd:'SPECTR_VS', orc, repId:repId!, rep, NestMbVer:1});
    const [renderTofd]= useSubRepMain("cm/tofd", {nestMd:'TOFD_TS', orc, repId:repId!, rep, NestMbVer:1});
    const [rootMenu]=useRepMenuDirItems(VsProjects默认, orc.Projects, `/reportView/${rep?.modeltype}/ver/${verId}/${repId}`);
    const [renderUtrSonic]= useSubRepMain("cm/sonic", {nestMd:'SONIC_TS',orc, repId:repId!, rep, NestMbVer:1});
    const [renderRadioTs ]= useSubRepMain("cm/radio", {nestMd:'RADIO_TS',orc, repId:repId!, rep, NestMbVer:1});
    const [permeation ]= useSubRepMain("cm/permeation", {nestMd:'PERME_TS',orc, repId:repId!, rep, NestMbVer:1});
    const [magnetic ]= useSubRepMain("cm/magnetic", {nestMd:'MAGNT_TS',orc, repId:repId!, rep, NestMbVer:1});
    const [spectrA ]= useSubRepMain("cm/spectrA", {nestMd:'SPECTR_AL',orc, repId:repId!, rep, NestMbVer:1});
    const [optical ]= useSubRepMain("cm/optical", {nestMd:'OPTIC_TS',orc, repId:repId!, rep, NestMbVer:1});
    const [hardness ]= useSubRepMain("cm/hardness", {nestMd:'HARD_TS',orc, repId:repId!, rep, NestMbVer:1});
    //手机菜单可安排的：一层7位置+二层9位置。报告最多安排16个菜单。 加了, {time: Date()});：URL强制刷新！才能真正跳转成功到位置
  return (
    <React.Fragment>
        {rootMenu}
        <div css={{
            "@media not print": {
                marginTop: '1rem',
                marginBottom: '1rem'
            }
        }}>
          <div css={{
              display: 'flex',
              flexDirection: 'column',
              justifyContent: 'space-between',
              "@media print": {
                    height:'100vh',       //一张纸的高度！同时配合 pageBreakAfter: 'always', 来约束特定纸张大小；
                    // overflowY: 'hidden',     //只想打印一页的情形！！ 纸张规格；假如实际的数据超出自然不打印的！ 不加上打印重叠的；
                    pageBreakInside: 'avoid',
              }
          }}>
                {ReportFirstPageHeadAllNmbbm({theme, rep, mbbm: 'FJB/TM-1007-1-0-2022'})}
                <div>
                    <Text variant="h3" css={{
                        textAlign: 'center',
                        "@media (min-width:690px),print and (min-width:538px)": {
                            fontSize: theme.fontSizes[6],
                        }
                    }}>
                        工业管道定期检验报告
                    </Text>
                    <br css={{"@media not print": {display: 'none'}}}/>
                    <Text variant="h5" css={{
                        textAlign: 'center',
                    }}> （ FJB/DC-1040-0-2018 ）
                    </Text>
                </div>
                <div css={{
                    "@media print": {
                        // minHeight: '-webkit-fill-available',
                    }
                }}>
                    {首页设备概况P({theme, orc, rep})}
                </div>
                <div css={{
                    textAlign: 'center',
                    "@media print": {
                        // pageBreakAfter: 'always',
                        pageBreakInside: 'avoid'
                    }
                }}>
                    {落款单位地址}
                </div>
           </div>       {/*第一页纸张的,前面必定新断开打印一页的,才能确保100vh盛满一张纸张的底部区域,保证内容不会大于100vh前提下的稳妥做法*/}

            {注意事项IndPl({
                rep,
                comply: '书为依据《压力管道安全技术监察规程——工业管道》（TSG D0001-2009）、《压力管道定期检验规则——工业管道》（TSG D7005-2018）制定，适用于工业管道定期检验报告的结论报告，检验结论仅代表该设备在检验时的安全状况'
            })}

            {目录页PL({theme, orc, rep, suffix:true})}
            {检验结论报告({theme, orc, rep})}
            <Text variant="h2" css={{textAlign: 'center'}}>工业管道定期检验结论报告附页</Text>
            <div css={{display: 'flex', justifyContent: 'flex-end',}}>
                <Text>报告编号：{rep.isp.no}</Text>
            </div>
            {结论报告附页PL({theme, orc, rep})}
            <Text id='MaterialReview' variant="h2" css={{
                textAlign: 'center', marginTop: '1rem',
            }}>工业管道资料审查报告</Text>
            {资料审查报告({theme, orc, rep})}
            <HashLinkObserver/>
            <Text id="Structural" variant="h2" css={{
                textAlign: 'center', marginTop: '1rem',
                "@media print": {
                    pageBreakBefore: 'always', marginTop: 'unset',
                },
            }}>工业管道宏观检验报告</Text>
            {宏观检验报告({theme, orc, rep})}
            {mapFxian.get('安全附件与仪表检验')?.do && <>
                <Text id='AdditionalTest' variant="h2" css={{textAlign: 'center', marginTop: '1rem',}}
                >安全附件与仪表检验报告</Text>
                {安全附件检验({theme, orc, rep})}
            </>
            }

            {mapFxian.get('壁厚测定')?.do && <>
                {renderThickm}
               </>
            }
            {orc?.Projects?.[13]?.do && orc?.Projects?.[13]?.name === '光谱分析' && renderSpectrVs}

            {orc?.Projects?.[9]?.do && orc?.Projects?.[9]?.name === '衍射时差法（TOFD）超声检测' && renderTofd}
            {mapFxian.get('渗透检测')?.do && <>
                {permeation}
            </>}
            {mapFxian.get('射线检测')?.do && <>
                {renderRadioTs}
            </>}
            {mapFxian.get('磁粉检测')?.do && <>
                {magnetic}
            </>}
            {mapFxian.get('光谱分析')?.do && <>
                {spectrA}
            </>}
            {mapFxian.get('光谱检测')?.do && <>
                {optical}
            </>}
            {mapFxian.get('硬度检测')?.do && <>
                {hardness}
            </>}
            {mapFxian.get('超声波检测')?.do && <>
                {renderUtrSonic}
            </>}
            {mapFxian.get('管道特性表')?.do &&
                <PipelineCharacteristics orc={orc} rep={rep}/>
            }
            {mapFxian.get('管道单线图')?.do &&
                <PipeLineDiagram orc={orc} rep={rep} title={'工业管道单线图'}/>
            }

        </div>

        {末尾链接({template: rep?.modeltype, verId, repId: repId || ''})}
    </React.Fragment>
  );
}


//原来看到：容器定检主报告的 附页2实际可嵌套在壁厚测定报告后紧跟的做法（标记测厚位置和数据表放在图片上的方式）且检验人员签字可以2个人的。
